<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>05使用rem单位</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
       div{
            margin: 10px;
            padding: 20px;
            border:1px solid gray;
       }
       #em div{
           font-size: 1.5em;
       }
       #rem div{
           font-size: 1.5rem;
       }
    </style>
</head>
<body>
<h1>3-5使用rem单位</h1>
<h3>使用em单位，每层都是1.5em，参考标准是相对的</h3>
<code>font-size: 1.5em;</code>
<section id="em">
<div class="outside">这是外层
    <div class="mid">这是中间层
        <div class="inside">这是里层</div>
    </div>
</div>
</section>
<h3>使用rem单位，每层都是1.5rem，参考标准是绝对的</h3>
<code>font-size: 1.5rem;</code>
<section id="rem">
<div class="outside">这是外层
    <div class="mid">这是中间层
        <div class="inside">这是里层</div>
    </div>
</div>
</section>


</body>
</html>